<script setup>
import {listLibrary} from '@/api/phone'
import {ref} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()
const library = ref([])
listLibrary().then((res) => {
  library.value = res.rows
})
const gotoDetail = (id) => {
  router.push(`/library/${id}`)
}
</script>

<template>
  <div class="drink">
    <head-title title="茶博物馆"></head-title>
    <div class="list">
      <div class="item" v-for="item in library" :key="item.id" @click="gotoDetail(item.id)">
        <img v-cover="item.cover"/>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.drink {
  padding: 15px;
}

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  row-gap: 10px;
  column-gap: 20px;
  margin-top: 20px;
  justify-content: space-between;

  .item {
    position: relative;

    .name {
      position: absolute;
      bottom: 18px;
      left: 9px;
      color: #fff;
      font-size: 18px;
    }
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
}
</style>
